<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="paren-soup-dark.css">
        <link rel="stylesheet" type="text/css" href="modal.css">
        <style>
            @font-face {
                font-family: 'Fira Code';
                src: url('fonts/FiraCode-Regular.otf') format('opentype');
            }
            html, body, .paren-soup {
                font-family: 'Fira Code';
                height: 100%;
                margin: 0;
            }
            html, body {
                overflow: hidden;
            }
            .paren-soup {
                overflow: auto;
            }
            .paren-soup .content {
                min-height: 100%;
            }
            #instarepl {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="paren-soup" id="paren-soup">
            <div class="instarepl" id="instarepl"></div>
            <div class="numbers" id="numbers"></div>
            <div class="content" contenteditable="true" id="content"></div>
        </div>
        <div id="modal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="document.querySelector('#modal').style.display='none';">&times;</span>
                <p>
                  This file was modified externally.
                  You can either <a href="#" onclick="window.java.onload();document.querySelector('#modal').style.display='none';">reload</a>
                  the file or close this dialog and continue editing.
                </p>
            </div>
        </div>
        <script type="text/javascript" src="paren-soup.js"></script>
    </body>
</html>
